<style scoped>
    .content-box {
        height: 100%;
        background: #ffffff;
        padding: 30px 60px;
        overflow: auto;
    }

    .block__warp {
        display: flex;
        justify-content: space-between;
    }

    .block {
        max-width: 24%;
        height: 120px;
        border: 1px solid #bbbbbb;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 20px;
        flex: 1;
    }

    .block__logo {
        width: 65px;
        height: 65px;
    }

    .block__context {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        font-size: 20px;
        flex: 1;
    }

    .block__title {
        line-height: 50px;
        text-align: center;
    }

    .table {
        border: 1px solid #bbbbbb;
        width: 100%;
        margin: 50px 0;
    }

    .table td {
        border: 1px solid #bbbbbb;
        line-height: 50px;
        font-size: 18px;
    }

    .table__title {
        border: 1px solid #bbbbbb;
        line-height: 50px;
        background: #f5f5f5;
        font-size: 20px;
        font-weight: bold;
        text-align: left;
        padding-left: 35px;
    }

    .table .table__cell--caption {
        font-size: 18px;
    }

    .table .table__cell--value {
        background: #FFFFFF;
        text-align: center;
    }

    .table .table__cell--num {
        color: #e51c23;
    }

    .table__cell--no {
        line-height: 30px !important;
        padding: 30px;
    }


</style>
<template>
    <div class="content-box">
        <div class="block__warp">
            <div class="block">
                <img src="./assets/user_all.gif" alt="" class="block__logo">
                <div class="block__context">
                    <div class="block__title">入驻用户总数</div>
                    <div>{{vo.enter.count}}</div>
                </div>
            </div>

            <div class="block">
                <img src="./assets/order_count.png" alt="" class="block__logo">
                <div class="block__context">
                    <div class="block__title">放单总数</div>
                    <div>{{12321}}</div>
                </div>
            </div>

            <div class="block">
                <img src="./assets/user.png" alt="" class="block__logo">
                <div class="block__context">
                    <div class="block__title">普通用户总数</div>
                    <div>{{vo.user.count}}</div>
                </div>
            </div>


            <div class="block">
                <img src="./assets/err.png" alt="" class="block__logo">
                <div class="block__context">
                    <div class="block__title">投诉举报总数</div>
                    <div>{{12321}}</div>
                </div>
            </div>
        </div>


        <table class="table">
            <tr>
                <td class="table__title" colspan="3">待处理事务(初审)</td>
            </tr>
            <tr>
                <td class="table__cell--value">待审核放单(<span class="table__cell--num">{{21}}</span>)</td>
                <td class="table__cell--value">待审核入驻(<span class="table__cell--num">{{21321}}</span>)</td>
                <td class="table__cell--value">待处理举报(<span class="table__cell--num">{{321}}</span>)</td>
            </tr>
        </table>


        <table class="table">
            <tr>
                <td class="table__title" colspan="3">待处理事务(终审)</td>
            </tr>
            <tr>
                <td class="table__cell--value">待审核放单(<span class="table__cell--num">{{21}}</span>)</td>
                <td class="table__cell--value">待审核入驻(<span class="table__cell--num">{{21321}}</span>)</td>
                <td class="table__cell--value">待处理举报(<span class="table__cell--num">{{321}}</span>)</td>
            </tr>
        </table>


        <table class="table">
            <tr>
                <td class="table__title" colspan="5">放单总览</td>
            </tr>
            <tr>
                <td class="table__cell--value table__cell--no">
                    <div class="table__cell--num">1000</div>
                    <div>今日新增</div>
                </td>
                <td class="table__cell--value table__cell--no">
                    <div class="table__cell--num">1000</div>
                    <div>本月新增</div>
                </td>
                <td class="table__cell--value table__cell--no">
                    <div class="table__cell--num">1000</div>
                    <div>已下架</div>
                </td>
                <td class="table__cell--value table__cell--no">
                    <div class="table__cell--num">1000</div>
                    <div>举报下架</div>
                </td>
                <td class="table__cell--value table__cell--no">
                    <div class="table__cell--num">1000</div>
                    <div>全部商品</div>
                </td>
            </tr>
        </table>


        <table class="table">
            <tr>
                <td class="table__title" colspan="5">用户总览</td>
            </tr>
            <tr>
                <td class="table__cell--value table__cell--no">
                    <div class="table__cell--num">{{vo.user.addCount}}</div>
                    <div>普通新增</div>
                </td>
                <td class="table__cell--value table__cell--no">
                    <div class="table__cell--num">{{vo.enter.addCount}}</div>
                    <div>入驻新增</div>
                </td>
                <td class="table__cell--value table__cell--no">
                    <div class="table__cell--num">{{vo.user.count}}</div>
                    <div>普通用户</div>
                </td>
                <td class="table__cell--value table__cell--no">
                    <div class="table__cell--num">{{vo.enter.count}}</div>
                    <div>入驻用户</div>
                </td>
                <td class="table__cell--value table__cell--no">
                    <div class="table__cell--num">{{this.vo.user.count}}</div>
                    <div>用户总数</div>
                </td>
            </tr>
        </table>
    </div>
</template>


<script>
    import {getDateTimeString, getDateString} from 'utils'
    export default {
        data(){
            return {
                po: {},
                vo: {
                    enter: {
                        count: 0,
                        addCount: 0,
                    },
                    user: {
                        count: 0,
                        addCount: 0,
                    }
                }
            }
        },
        computed: {
            /*allUserCount: function () {
                return this.vo.enter.count + this.vo.user.count
            }*/
        },
        methods: {
            getDateString,
            getDateTimeString,
            getDateTimeShort(time){
                return getDateTimeString(time).substring(0, 16)
            },
            getEnterCount(){
                this.$post("/enter/count").then(data=> {
                    this.vo.enter = data
                }).catch(err=> {

                })
            },

            getUserCount(){
                this.$post("/user/count").then(data=> {
                    this.vo.user = data
                }).catch(err=> {

                })
            },

            reload(){
                this.getEnterCount()
                this.getUserCount()
            }
        },
        mounted(){
            this.reload()
        },
        components: {},
        filters: {}
    }
</script>